<template>
  <div>
    <!-- 最终渲染a标签，点击之后会修改浏览器地址栏的路径,但是不发送请求 -->
    <!-- router-link会自动添加类名帮我们实现高亮.默认类型是.router-link-active. 可以通过active-class自定义类名 -->
    <!-- router-link默认是添加历史记录,如果要改成替换历史记录,则在router-link上写replace属性 -->
    <router-link to="/home" active-class="done" replace>home</router-link
    >&nbsp;&nbsp;&nbsp;
    <router-link to="/login" active-class="done">login</router-link>
    <hr />
    <!-- 这个组件用于展示路由组件，写在哪里，则路由组件就渲染在哪里 -->

    <!-- 注意: 默认情况下,路由组件看不到了就会卸载,打开之后又会重新挂载.但是如果不希望路由组件在看不到的情况下卸载,就可以使用keep-alive  -->
    <!-- keep-alive 不写include.则router-view这个位置渲染的所有的路由组件都会被缓存 -->
    <!-- <keep-alive>
      <router-view></router-view>
    </keep-alive> -->
    <!-- 如果希望其中的一个缓存,则添加include属性,值为组件的name属性 -->
    <!-- <keep-alive include="xxx">
      <router-view></router-view>
    </keep-alive> -->
    <!-- 如果希望其中的多个缓存,则添加include属性,值为数组,数组中写组件的name属性 -->
    <keep-alive :include="['xxx', 'yyy']">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script></script>

<style>
.router-link-active {
  color: red;
}

.done {
  color: green;
}
</style>
